<template>
	<view class="login">
		<view class="login-head">
			<view class="login-head-left">
				<view class="title">你好</view>
				<view class="title">欢迎登录移动教研</view>
			</view>
			<view class="log">研</view>
		</view>
		<view class="login-body">
			<view class="input-item">
				<view class="input-name">用户名</view>
				<input v-model="loginForm.loginName" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item">
				<view class="input-name">密码</view>
				<input v-model="loginForm.password" class="input" type="password" placeholder="请输入密码" maxlength="30" />
			</view>
			<view class="password-option">
				<!-- 记住密码 -->
				<view class="mui-checkbox">
					<checkbox-group @change="checkboxChange">
						<label>
							<checkbox :checked="rememberPsw" color="#0041c5" /> 记住密码
						</label>
					</checkbox-group>
				</view>
				<view class="input-text" @click="handleForgotPassword">忘记密码？</view>
			</view>
			<view class="login-btn">
				<u-button @click="handleLogin" type="primary">登录</u-button>
				<u-button @click="handleRegister" type="primary">立即注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/login'
	import { setDeviceId,getDeviceId } from '@/utils/auth'
	export default {
		data() {
			return {
				loginForm: {
					// 18285069585 老师
					// 15271943580 管理员
					loginName: "",
					password: "",
					// deviceId: this.$store.state.user.deviceId,
					// deviceId: uni.getStorageSync("deviceId"),
					deviceType: uni.getStorageSync("deviceType"),
					longitude: uni.getStorageSync("longitude"),
					latitude: uni.getStorageSync("latitude")
				},
				rememberPsw: false
			}
		},
		methods: {
			//复选框
			checkboxChange: function(e) {

				if (e.detail.value.length === 1) {
					//获取缓存的账号
					uni.getStorageSync('HCuname', this.loginForm.loginName);
					uni.getStorageSync('HCpassw', this.loginForm.password);
					this.rememberPsw = true
				} else {
					uni.removeStorageSync('HCuname');
					uni.removeStorageSync('HCpassw');
					this.rememberPsw = false
				}
			},
			handleForgotPassword() {
				this.$tab.navigateTo('/pages/forgotPassword')
			},
			handleLogin() {
				this.$store.dispatch('getDeviceId');
				uni.showLoading({
					title: '正在登录'
				})
				login(this.loginForm).then(res => {
					uni.hideLoading();
					if (res.status === 0) {
						if (res.type === 2) {
							this.$store.commit('SET_ROLES', false)
						} else {
							this.$store.commit('SET_ROLES', true)
						}
						//缓存账号和密码
						if (this.rememberPsw) {
							uni.setStorageSync('HCuname', this.loginForm.loginName);
							uni.setStorageSync('HCpassw', this.loginForm.password);
						} else {
							uni.removeStorageSync('HCuname');
							uni.removeStorageSync('HCpassw');
						}
						uni.$u.toast('登录成功');
						setDeviceId(this.loginForm.deviceId)
						this.$store.dispatch('GetInfo').then(res => {
							this.$store.dispatch('GetPeriodData')
							this.$store.dispatch('getSubjectData')
							this.$store.dispatch('getAreaData')

							this.$tab.reLaunch('/pages/index')
							this.$tab.reLaunch('/pages/index')
						})
					} else {
						uni.$u.toast(res.result);
					}
				})
			},
			handleRegister() {
				this.$tab.navigateTo('/pages/register')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;

		.login {
			background: #6699ff;
			height: 100vh;

			.login-head {
				width: 80vw;
				margin: 0 auto;
				padding-top: 15%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 28px;
					color: #fff;
					margin-bottom: 15px;
				}

				.log {
					width: 100rpx;
					height: 100rpx;
					background: #fff;
					border-radius: 10px;
					text-align: center;
					line-height: 100rpx;
					font-size: 45px;
					color: #426eee;
				}
			}

			.login-body {
				background: #fff;
				border-radius: 10px;
				width: 80vw;
				margin: 15px auto;
				padding: 0 15px;

				.input-item {
					border-bottom: 1px solid #eee;
					padding: 15px 0;

					.input-name {
						font-size: 20px;
						color: #666;
						margin-bottom: 15px;
					}

					.input {
						font-size: 18px;
						color: #7f8a96;
					}
				}

				.password-option {
					margin-top: 15px;
					display: flex;
					justify-content: space-between;

					.input-text {
						font-size: 14px;
						color: #666;
					}
				}

				.login-btn {
					margin-top: 40px;
					padding-bottom: 15px;

					.u-button {
						margin-bottom: 15px;
					}
				}
			}
		}
	}
</style>
